import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { classModule } from 'snabbdom/build/package/modules/class'
import { propsModule } from 'snabbdom/build/package/modules/props'
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventListeners'

let pageVnode = null // 记录当前页面生成的Vnode

const patch = init([classModule, propsModule, styleModule, eventListenersModule])
const createPageVnode = () => {
    /**
     * 构造页面vNode
     */
    return h('div.page', [
        h('h1', 'top 10 movies'),
        h('div.title', [
            h('span', 'Sort by:'),
            h('div.btn-group', [
                h('span.btn.rank', {
                    on: { click: [sortList, 'index'] } 
                }, 'rank'),
                h('span.btn.title', {
                    on: { click: [sortList, 'title'] } 
                }, 'title'),
                h('span.btn.desc', {
                    on: { click: [sortList, 'content'] } 
                },'description'),
            ]),
            h('span.btn.add',{
                on: {
                    click: add
                }
            }, 'Add'),
        ]),
        h('div.list', createList(pageList))
    ])
}
const defaultHeight = 75 // 列表行的默认高度
const pageList = [
    { index: 1, title: 5, content: '666', height: 0 },
    { index: 2, title: 4, content: '224', height: 0 },
    { index: 3, title: 3, content: '332', height: 0 },
    { index: 4, title: 2, content: '944', height: 0 },
    { index: 5, title: 1, content: '755', height: 0 },
]
const createList = (data) => {
    /**
     * 构建vNode的列表
     */
    const hList = []
    data.forEach((element,index) => {
        element.height = (index) * defaultHeight
        const vNode = h('p.row', {
            key: element.index,  // 添加key值是为了后续更改dom时提高转换速度,key值特别重要
            style: {
                // top: element.height + 'px',
                opacity: '0',
                transform: 'translate(-200px)',
                delayed: { transform: `translateY(${element.height + 10}px)`, opacity: '1' },
                remove: { opacity: '0', transform: `translateY(${element.height}px) translateX(200px)` }
            },
        }, [
            h('span',element.index),
            h('span',element.title),
            h('span',element.content),
            h('span.btn.rm-btn',{
                on: {
                    click: [remove, element.index]
                }
            }, 'x')
        ])
        hList.push(vNode)
    });
    return hList
}
const margin = 10
const pageView = (oldNode, newNode) => {
    pageVnode = patch(oldNode, newNode)
}

const sortList = (prop) => {
    /**
     * 对节点进行排序
     */
    pageList.sort((a,b) => {
        if(a[prop] > b[prop]){
            return 1
        }
        if(a[prop] < b[prop]){
            return -1
        }
        return 0
    })
    pageView(pageVnode, createPageVnode())
}
const add = () => {
    /**
     * 增加节点
     */
    const len = pageList.length
    const node = {
        index: len + 1,
        title: Math.floor(Math.random() * 10),
        content: String(Math.floor(Math.random() * 10)).repeat(3)
    }
    pageList.unshift(node)
    pageView(pageVnode, createPageVnode())
}
const remove = (aimIndex) => {
    /**
     * 删除节点
     */
    const location = pageList.findIndex((item) => item.index == aimIndex)
    location === -1 ? null : pageList.splice(location, 1)
    console.log(pageList)
    pageView(pageVnode, createPageVnode())
}
window.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('app')
    pageVnode = patch(container, createPageVnode())
})
